<!DOCTYPE html>
<html>
<head>
		<link href="css/bootstrap.min.css" rel="stylesheet">
	<meta charset="utf-8">
	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

	<title>delegate list - by BitSuperLab </title>
	<link rel="stylesheet" type="text/css" href="tables/media/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="tables/examples/resources/syntax/shCore.css">
	<link rel="stylesheet" type="text/css" href="tables/examples/resources/demo.css">

  <script src=http://cdn.pubnub.com/pubnub.min.js ></script>
  <script type="text/javascript" language="javascript" src="tables/media/js/jquery.js"></script>
	<script type="text/javascript" language="javascript" src="tables/media/js/jquery.dataTables.js"></script>
  <script type="text/javascript" language="javascript" src="tables/examples/resources/syntax/shCore.js"></script>
  <script type="text/javascript" language="javascript" src="tables/examples/resources/demo.js"></script>
	<script type="text/javascript" language="javascript" class="init">

  var pubnub = PUBNUB.init({
    publish_key   : 'demo',
    subscribe_key : 'demo'
  })
 
  pubnub.subscribe({
    channel : "blockchain_list_delegate",
    message : function(m){
        var idx = table.column(0,{order:'index'}).data().indexOf(m[0]);
        if(idx >= 0){
            table.row(idx).data( m );
            table.row(idx).draw(false)
           } else {
            table.row.add(m).draw(false);
           }
        }
  })
 
  pubnub.history({
    channel : "blockchain_list_delegate",
    count: 101,
    callback: function(m){
      for ( var i in m[0]){
        var line = m[0][i]
        var idx = table.column(0,{order:'index'}).data().indexOf(line[0]);
        if(idx <  0){
            table.row.add(line)
           }
      }
      table.draw(false)

    }
        
  })

$(document).ready(function() {
  table = $('#example').DataTable( {
       "order": [[ 8, "desc" ]],
       "stateSave": true,
       "pageLength": 10,
       "deferRender": true,
       "columnDefs": [
           {
                "render": function ( data, type, row ) {
                    return data +'%';
                },
                "targets": 2
           },
           {
                "render": function ( data, type, row ) {
                    if(data == "N/A"){
                        return ""
                        }
                    return data +'%';
                },
                "targets": 5
           },
           {
                "render": function ( data, type, row ) {
                    return data +'%';
                },
                "targets": 6
           }
         ],
       "aoColumns": [
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] },
           { "orderSequence": [ "desc", "asc" ] }
       ]
  } );
} );

	</script>
</head>

<body class="dt-example">
		<div class="container">
			<div class="navbar">
				<div class="navbar-inner">
					<div class="container">
						<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">BitSuperLab</a>
						<div class="nav-collapse">
							<ul class="nav">
								<li>
									<a href="index.html">Block List</a>
								</li>
								<li>
									<a href="trx.html">Transaction List</a>
								</li>
								<li class="active">
									<a href="delegate.html">Delegate List</a>
								</li>
							</ul>
							<ul class="nav pull-right">
								<li>
									<a href="index.html"></a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
	<div class="container">
		<section>
			<table id="example" class="display" cellspacing="0" width="100%">
				<thead>
					<tr>
						<th>ID</th>
						<th>NAME</th>
						<th>APPROVAL</th>
						<th>PRODUCED</th>
						<th>MISSED</th>
						<th>RELIABILITY</th>
						<th>PAY RATE</th>
						<th>PAY(BTSX)</th>
						<th>LAST BLOCK</th>
					</tr>
				</thead>
			</table>
	</section>
</body>
</html>
